<template>
  <div class="logOperating">
    <pageCard :title-name="'操作日志'" :type="'pageTitle'">
      <div>
        <div class="topText">操作账号：</div>
        <el-input
          v-model="search.operatorAccount"
          placeholder="请输入"
          class="searchInput"
          @keyup.enter.native="searchClick"
        />
        <div class="topText">操作时间：</div>
        <el-date-picker
          v-model="search.chooseDate"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="dateRange"
          :picker-options="pickerOptions"
        />
        <div class="topText" style="padding-left: 20px">操作类型：</div>
        <el-select v-model="search.operationType" placeholder="请选择" clearable>
          <el-option v-for="item in OperationOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchClick">搜索</el-button>
      </div>
      <myTable
        ref="myTable"
        style="height: 100%"
        :row-key="'logId'"
        :table-label="tableLabel"
        :table-data="tableData"
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="getTableData"
        @handleSelectionChange="handleSelectionChange"
        @rowClickChange="rowClickChange"
      >
        <template #operating="slotProps">
          <el-link :underline="false" type="primary" @click="alertForm('view', slotProps.rowValue)">
            <i class="el-icon-view" />
            详细
          </el-link>
        </template>
      </myTable>
      <pagination
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="$refs.myTable.getTableData()"
      />
    </pageCard>
    <logForm v-if="pageType !== 'index'" ref="logForm" @closeForm="closeForm" />
  </div>
</template>

<script>
import { getLoginLog, getLogOperateType } from '@/api/system-management'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import logForm from '../../components/logForm'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  name: 'LogOperating',
  components: {
    pageCard,
    myTable,
    pagination,
    logForm
  },
  data() {
    return {
      pageType: 'index',
      search: {
        operatorAccount: '',
        chooseDate: null,
        operationType: null
      },
      searchData: {
        pageSize: 15,
        currentPage: 1,
        sort: {},
        params: {}
      },
      OperationOptions: [],
      // table需要的数据
      tableData: [],
      tableLabel: [
        {
          prop: 'logId',
          label: '日志编号',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'operatorAccount',
          label: '用户账号',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'operatorName',
          label: '用户姓名',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'remoteAddress',
          label: '操作地址',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'logInfo',
          label: '操作信息',
          // width: 220,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: '操作时间',
          width: 220,
          showOverflowTooltip: true
        },
        // {
        //   prop: 'operateModule',
        //   label: '操作模块',
        //   width: 180,
        //   showOverflowTooltip: true
        // },
        {
          prop: 'logType',
          label: '操作类型',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'operating',
          label: '操作',
          fixed: 'right',
          type: 'scope',
          width: 160,
          showOverflowTooltip: false
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      currentRow: {},
      // 日期选择配置
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      callbackFun: null,
      getLoginLogRequestId: generateUUID(),
      getLogOperateTypeRequestId: generateUUID()
    }
  },
  created() {
    const queryData = this.$route.query
    if (queryData.logType) {
      this.search.operationType = queryData.logType
      this.searchData.params.logType = this.search.operationType
      this.searchData.params.operationType = this.search.operationType
      this.search.deviceKey = [queryData.deviceKey]
      this.search.deviceName = queryData.deviceName
      this.searchData.params.objectId = [queryData.deviceKey]
    }
  },
  mounted() {
    this.getLogOperateTypeData()
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.getLoginLogRequestId) {
        let res = e.data.response
        self.tableData = res.data.data
        self.tableTotalSize = res.data.total_count
        self.callbackFun(self.tableData)
      } else if (e.data.webInfo.requestId === self.getLogOperateTypeRequestId) {
        let res = e.data.response
        self.OperationOptions = res.data
      }
    },
    getLogOperateTypeData() {
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.getLogOperateTypeRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/log/loadLogTypeComboOption',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: {},
          WebInfo: {
            requestId: this.getLogOperateTypeRequestId
          }
        }
        postMessage(message)
      } else {
        getLogOperateType().then((res) => {
          this.OperationOptions = res.data
        })
      }
    },
    // 获取tableData
    getTableData(cab) {
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.callbackFun = cab
        this.getLoginLogRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/vue/loginLog/load',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: this.searchData,
          WebInfo: {
            requestId: this.getLoginLogRequestId
          }
        }
        postMessage(message)
      } else {
        getLoginLog(this.searchData).then((res) => {
          this.tableData = res.data.data
          this.tableTotalSize = res.data.total_count
          cab(this.tableData)
        })
      }
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['operatorAccount'] = this.search.operatorAccount
      if (['operateDevice', 'manageDeviceAppointment'].includes(this.search.operationType)) {
        this.searchData.params['objectId'] = this.search.deviceKey
      } else {
        this.searchData.params['objectId'] = []
      }

      if (this.search.chooseDate) {
        this.searchData.params['startDate'] = this.search.chooseDate[0]
        this.searchData.params['endDate'] = this.search.chooseDate[1]
      } else {
        this.searchData.params['startDate'] = null
        this.searchData.params['endDate'] = null
      }
      if (this.search.operationType) {
        this.searchData.params['logType'] = this.search.operationType
      } else {
        this.searchData.params['logType'] = null
      }
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.currentRow = val
    },
    // 打开表单
    alertForm(type, row) {
      this.pageType = type
      this.$nextTick(() => {
        this.$refs.logForm.is(this.pageType, row)
      })
    },
    // 关闭表单
    closeForm() {
      this.pageType = 'index'
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../../styles/pageTableTop.scss';

.logOperating {
  height: 99%;
  /deep/ .el-select /deep/ .el-input /deep/ .el-select__caret {
    position: relative;
    top: 5px;
  }
  /deep/ .el-select /deep/ .el-input /deep/ .el-select__caret.is-reverse {
    top: 0px;
  }
}
</style>
